<!--系统基本信息-->
<template>
  <div class="video-list-manage-parent" ref="parentContainer">
    <!--操作表单区域-->
    <div class="option-parent" ref="optionParentContainer">
    </div>

    <!--数据表格区域-->
    <div v-bind:style="{height:tableHeight+'px',width:'100%',overflow:'auto'}" v-loading="loading">
      <el-form ref="form" label-width="100px" style="padding: 10px" label-position="center">
        <p class="item-title">基本信息:</p>
        <el-row :gutter="0" style="border-bottom: 1px solid lightgrey">
          <el-col :span="5">
            <el-form-item label="手机号:">
              {{phoneNum}}
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="">
              <el-button
                v-show="!showModifyForm"
                size="mini"
                type="primary"
                @click="showModifyInfo(true)">
                修改密码
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <div v-show="showModifyForm">
          <el-row :gutter="0" style="padding-top: 10px;">
            <el-col :span="8">
              <el-form-item label="短信验证码:">
                <el-input v-model="checkCode" placeholder="请输入内容"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-button
                v-show="!isShowLeftTime"
                style="margin-top: 5px;margin-left: 5px"
                size="mini"
                type="primary"
                @click="obtainCheckCode()">
                获取验证码
              </el-button>
              <el-button
                v-show="isShowLeftTime"
                style="margin-top: 5px;margin-left: 5px"
                size="mini"
                type="primary">
                {{leftTime}} s
              </el-button>
            </el-col>
          </el-row>
          <el-row :gutter="0" style="padding-top: 10px;">
            <el-col :span="8">
              <el-form-item label="新密码:">
                <el-input v-model="password1" placeholder="请输入新密码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="0" style="padding-top: 10px;">
            <el-col :span="8">
              <el-form-item label="确认新密码:">
                <el-input v-model="password2" placeholder="请确认新密码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="0" style="padding-top: 10px;">
            <el-col :span="8" style="text-align: center">
              <el-button
                style="margin-top: 5px;margin-left: 5px"
                size="mini"
                type="primary"
                @click="modifyPassword()">
                保存
              </el-button>
              <el-button
                style="margin-top: 5px;margin-left: 5px"
                size="mini"
                type="primary"
                @click="showModifyInfo(false)">
                取消
              </el-button>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>

    <!--翻页区域-->
    <div class="pagination-parent" ref="paginationParentContainer">

    </div>
  </div>
</template>

<script>
  import CPageBase from "../fragment/CPageBase"
  import CRootBase from "../fragment/CRootBase"
  import md5 from "js-md5"
  export default {
    data() {
      return {
        pathArr: [
          {path: "/", name: "首页"},
          {path: "/sys_account_info", name: "账号设置"},
        ],
        phoneNum: '',
        checkCode: '',
        password1: '',
        password2: '',

        showModifyForm: false,
        leftTime: "",
        isShowLeftTime: false,

        loading: ''
      }
    },
    mixins: [CPageBase, CRootBase],
    components: {},
    watch: {
    },
    mounted() {
    },
    activated() {
      this.initCurrentPath();
      this.initDatas();

    },
    deactivated() {
      this.$destroy(true);
    },
    methods: {
      //初始化面包屑路径
      initCurrentPath() {
        this.$store.commit('changeCurrentLocation', this.pathArr);
      },

      // 初始化页面数据
      initDatas () {
        this.phoneNum = this.$utils.getCookie('phoneNum');
      },

      //显示修改表单
      showModifyInfo (sign) {
        this.showModifyForm = sign
      },

      // 修改密码
      modifyPassword () {
        if (this.$utils.isEmpty(this.checkCode)) {
          this.$message({
            message: '验证码未输入!',
            type: 'warning'
          });
          return;
        }
        if (this.$utils.isEmpty(this.password1)||this.$utils.isEmpty(this.password2)) {
          this.$message({
            message: '密码未输入!',
            type: 'warning'
          });
          return;
        }
        if (this.password1 !== this.password2) {
          this.$message({
            message: '两次密码不一致!',
            type: 'warning'
          });
          return;
        }

        let parameter = new URLSearchParams();
        parameter.append("action", "base_agent_reset_password_mobile");
        parameter.append("uservalue", this.phoneNum);
        parameter.append("password", md5(this.password1));
        parameter.append("activecode", this.checkCode);
        let that = this;
        that.loading = true;
        this.$http.requestAuthData(that, parameter, function (data) {
          that.$utils.removeCookie(that.$keys.USER_ID);
          that.$utils.removeCookie(that.$keys.USER_KEY);
          that.$utils.removeCookie(that.$keys.AGENT_ID);
          that.$router.replace("/login");
        });

      },

      //获取验证码
      obtainCheckCode() {
        let parameter = new URLSearchParams();
        parameter.append("action", "base_activecode_send_mobile");
        parameter.append("activetarget", this.phoneNum);
        let that = this;
        that.loading = true;
        this.$http.requestData(that, parameter, -1, function (data) {
          that.$message({message: '验证码已发送!', type: 'success'});
          that.setLeftTime();
        });
      },

      // 设置剩余时间
      setLeftTime() {
        this.isShowLeftTime = true;
        this.leftTime = 60;
        let that = this;
        let interval = setInterval(function () {
          if (that.leftTime === 0) {
            that.isShowLeftTime = false;
            clearInterval(interval);
          }
          that.leftTime--;
        }, 1 * 1000);
      },
    }
  }
</script>

<style lang="scss" scoped="" type="text/scss" src="../../assets/style/base-info.scss">
</style>

